<template>
  <div>
    <div class="content">
      <!-- 顶部区域 -->
      <div class="movie-detail">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
      </div>
      <!-- 海报区域 -->
      <div class="haibao">
        <!-- 左侧图片区域 -->
        <div class="left">
          <van-image radius="10" fit="ver" height="10rem" class="img" lazy-load style="width: 100px"
            :src="movieData.imgs" />
        </div>

        <!-- 右侧文字及其按钮 -->
        <div class="right">
          <!-- 内容区域 -->
          <div class="int">
            <div style="font-weight: bold">{{ movieData.name }}</div>
            <div>{{ movieData.actor }}</div>
            <div>{{ movieData.director }}</div>
            <div>{{ movieData.showingon }} / {{ movieData.country }}</div>
          </div>

          <!-- 按钮 -->
          <div class="btn">
            <div class="btn1">
              <van-button type="info" class="button">
                点赞
                <van-icon @click="clicking" :badge="movieData.dz_count" size="1.5rem" name="thumb-circle" />
              </van-button>
            </div>

            <div class="btn2">
              <van-button type="info" class="button">
                收藏
                <van-icon v-if="shoucangcount == 0" @click="shoucang" color="white" size="1.5rem" name="like" />
                <van-icon v-else-if="shoucangcount == 1" @click="shoucang" color="#ffd21e" size="1.5rem" name="like" />
              </van-button>

            </div>
          </div>
        </div>
      </div>

      <!-- 评分区域 -->
      <div>
        <!-- 分割线 -->
        <van-divider :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '0 16px',
        }" content-position="left">评分</van-divider>

        <van-rate class="pingfen" allow-half void-icon="star" color="#ffd21e" v-model="value" readonly :count="10" />
        <van-button style="position: absolute;right:10px;" round @click="showPopup" type="info" class="plbtn">
          我要评论
        </van-button>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        content-position="left">简介</van-divider>
      <!-- 电影简介 -->
      <div class="jianjie">
        <span>{{ movieData.cont }}</span>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        content-position="left">推荐理由</van-divider>
      <!-- 推荐理由 -->
      <div class="tuijian">
        <span v-if="tuijian">{{ movieData.tj_cont }}</span>
        <van-empty v-else description="暂无推荐理由" />
      </div>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        content-position="left">影视评论</van-divider>
      <!-- 影视评论 -->
      <div class="pinglun">
        <ul>
          <li v-for="item in pinglunData" :key="item.pid">
            <div class="head">
              <img src="https://img2.doubanio.com/icon/u1000152-23.jpg" alt="">
              <span>{{ item.p_user }}</span>
              <span>{{ item.p_time }}</span>
              <div class="right">
                <van-icon color="#1989fa" @click="pl_dz(item.pid)" :badge="item.dz" size="1.5rem" name="thumb-circle" />
                <van-icon @click="$router.push(`/pinglun/${item.pid}`)" size="1.5rem" name="chat-o"
                  :badge="item.hf_count" />
              </div>
            </div>
            <div class="cont">评论:{{ item.p_cont }}</div>
          </li>
          <!-- 分页 -->
          <van-pagination v-if="pinglunData.length > 0" v-model="currentPage" :total-items="total" :items-per-page="5" />
        </ul>
        <!-- <van-empty description="暂无评论" /> -->
      </div>
      <!-- 弹出层 -->
      <van-popup v-model="show" round position="bottom" :style="{ height: '10vh' }">
        <van-field v-model="sms" center clearable label="请输入文字" placeholder="请输入文字">
          <template #button>
            <van-button size="small" type="primary" @click="fasong">发送</van-button>
          </template>
        </van-field>
      </van-popup>
    </div>
  </div>
</template>

<script>
import yinshiApi from "@/http/apis/yinshi-all/yinshiApi";
import userApi from "@/http/apis/user/userApi";
import dianshiApi from "@/http/apis/dianshi/DianshiApi";
import httpApi from "@/http/apis/movie/MovieApi";
import dongmanApi from "@/http/apis/dongman/DongmanApi";
import { Toast,Dialog } from 'vant';
import { mapMutations } from 'vuex'
import pinglun from "@/components/pinglun.vue";
export default {
  components: { pinglun },
  data() {
    return {
      shoucangcount: 0,
      id: this.$route.params.id,
      type: this.$route.params.type,
      movieData: [],
      value: 0,
      title: "",
      tuijian: true,
      pinglunData: [],
      show: false,
      sms: '',
      currentPage: 1,
      total: 0,
    };
  },
  methods: {
    ...mapMutations(['saveUser']),
    showPopup() {
      this.show = true;
    },
    //获取当前时间
    getNowDate() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day
    },
    // 我要评论
    fasong() {
      var user=this.$store.state.user
      if(!user){
        Dialog.confirm({
        title: '尚未登录',
        message: '亲!登录后才能评论哦!点击确认前往登录,点击取消返回',
      }).then(() => {
        this.$router.push('/login')
      })
        return
      }
      user=user.username
      var p_time=this.getNowDate()
      let params = { p_user: user, name: this.movieData.name, type: this.movieData.type, p_time, p_cont: this.sms }
      yinshiApi.yinshi_pinglun(params).then(res => {
        console.log(res);
        this.show = false;
        this.pinglun_all(this.movieData.name, this.movieData.type, this.currentPage)
      })
    },
    pinglun_all(name, type, page) {
      var params = { name, type, page, pagesize: 5 }
      console.log(params);
      yinshiApi.pinglun_all(params).then(res => {
        console.log(res);
        // this.pinglunData = res.data.data.result
        this.pinglunData.splice(0, this.pinglunData.length, ...res.data.data.result)
        this.total = res.data.data.total
      })
    },
    pl_dz(pid) {
      let params = { pid }
      yinshiApi.pinglun_dz(params).then(res => {
        console.log(res);
      })
      this.pinglun_all(this.movieData.name, this.movieData.type, this.currentPage)
    },
    getid() {
      var user=this.$store.state.user.username
      // 获取当前电影在收藏表中的id
      let params1 = { user, name: this.movieData.name, type: this.movieData.type }
      userApi.get_collectsId(params1).then(res => {
        // console.log(res.data.id);
        var id_collect = res.data.id
        return id_collect
      })
    },
    //收藏按钮
    shoucang() {
      var user=this.$store.state.user.username
      if (this.$store.state.user) {
        console.log("收藏按钮");
        let params = { user, id: this.id };
        var apis
        if (this.type == "movie") {
          apis = userApi.movies(params)
        } else if (this.type == "dongman") {
          apis = userApi.dongman(params)
        } else {
          apis = userApi.dianshi(params)
        }
        apis.then((res) => {
          console.log(res.data.code);
          if (res.data.code == 501) {
            // 取消收藏
            this.collect_delete()
            this.shoucangcount = 0
          } else {
            console.log('开始收藏');
            apis.then(res => {
              console.log(res);
              Toast.loading({
                message: "收藏成功",
                forbidClick: true,
                icon: 'none'
              });
              this.shoucangcount = 1
            })
          }
        });

      } else {
        Toast.loading({
          message: "请登录后再操作",
          forbidClick: true,
          icon: 'none'
        });
      }
    },
    collect_delete() {
      var user=this.$store.state.user.username
      // 获取当前电影在收藏表中的id
      let params1 = { user, name: this.movieData.name, type: this.movieData.type }
      userApi.get_collectsId(params1).then(res => {
        // console.log(res.data.id);
        var id_collect = res.data.id

        let params = { id: id_collect }
        userApi.shoucang(params).then((res) => {
          console.log("res", res);
        })

        Toast.loading({
          message: "取消收藏成功",
          forbidClick: true,
          icon: 'none'
        });
      })
    },
    //导航按钮点击返回
    onClickLeft() {
      this.$router.back();
    },
    movie() {
      let params = { id: this.id, type: this.type };
      yinshiApi.queryid(params).then((res) => {
        // console.log(res);
        this.movieData = res.data.data[0];
        console.log('movie', this.movieData);
        // console.log(this.movieData)
        this.value = Number(this.movieData.score);
        if (this.type == "movie") {
          this.title = "电影";
        } else if (this.type == "dongman") {
          this.title = "动漫";
        } else {
          this.title = "电视剧";
        }
        if (this.movieData.tj_cont == "还没有推荐理由" || "暂无") {
          this.tuijian = false
        }
      });
    },
    clicking(user, type, name) {
      var user=this.$store.state.user.username
      if (this.$store.state.user) {
        type = this.movieData.type
        name = this.movieData.name
        let params = { user, type, name };
        // console.log(params);
        userApi.dianzan(params).then((res) => {
          console.log(res)
          let params = { page: 1, pagesize: 10 };
          let apis;
          if (this.type == "movie") {
            apis = httpApi.queryMovie;
          } else if (this.type == "dongman") {
            apis = dongmanApi.dongmanApi;
          } else {
            apis = dianshiApi.querydianshi;
          }
          console.log(res.data.msg);
          if (res.data.msg == '今天已经点赞10次了') {
            Toast('点赞过于频繁，请稍后重试');
          }
          apis(params).then((res) => {

            this.movie();

          });
        });

      } else {
        Toast.loading({
          message: "请登录后再操作",
          forbidClick: true,
          icon: 'none'
        });
      }
    },
  },
  mounted() {
    // this.movie()
    this.movie()
    // console.log(this.movieData);
    // this.pinglun_all(this.movieData.name,this.movieData.type,1)
    // console.log(this.movieData.name,this.movieData.type);
  },
  watch: {
    movieData: {
      deep: true,
      handler() {
        console.log(this.movieData);
        this.pinglun_all(this.movieData.name, this.movieData.type, 1)
      }
    },
    currentPage: {
      handler() {
        console.log(this.currentPage);
        this.pinglun_all(this.movieData.name, this.movieData.type, this.currentPage)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
#button {
  width: 50%;
}

.haibao {
  display: flex;
  flex-wrap: wrap;
  // box-shadow: 0 0 10px 2px #dcdada;
background-color: #f7f7f7;

  .left {
    .img {
      display: block;
      margin-left: 10px;
      border-radius: 10px;
      margin-top: 10px;
    }
  }

  .right {
    margin-left: 10px;
    width: 60%;
    margin-top: 10px;

    .int {
      padding-bottom: 10px;
      line-height: 25px;
      font-size: 14px;
    }

    .btn {
      margin-top: 7px;
      margin-left: 15px;
      display: flex;

      .btn1 {
        margin-right: 10px;
      }

      .button {
        border-radius: 80px;

      }
    }
  }
}

.content {
  margin-bottom: 50px;
  background-color: var(--colors3);
}

.pingfen {
  margin-left: 10px;
}

.jianjie {
  padding: 5%;
  text-indent: 1.5rem;
  background-color: #f8f8f8;
// 
}

.tuijian{
  padding: 5%;
  text-indent: 1.5rem;
}

//评论区
.pinglun {
  ul {
    li {
      margin: 10px 10px;

      box-shadow: 0 0 10px 2px #dcdada;
      border-radius: 10px;

      .head {
        display: flex;
        align-items: center;
        position: relative;

        img {
          border-radius: 10px;
          margin: 10px 0;
        }

        span {
          margin: 0 10px;
        }

        .right {
          position: absolute;
          right: 10px;

          .van-icon {
            margin: 10px;
          }
        }
      }

      .cont {
        margin-bottom: 10px;
      }
    }
    .van-pagination{
      box-shadow: 0 0 10px 2px #dcdada;
      border-radius: 10px;
    }
  }
}

.plbtn {
  transform: translateY(-10px);
}

.van-popup {
  .pl_wz {
    transform: translateY(-20%);
    background-color: pink;
  }

  .pl_fs {
    position: absolute;
    right: 0;
    transform: translateY(20%);
  }
}

button {
  border-radius: 80px;
}

</style>
